<template>
    <div class="grid-box">
        <customBorder class="grid-item" title="用户增长统计">
            <TrendChart :x-data="cGrowthTrend.dateList" :series="cGrowthTrend.series" />
        </customBorder>
        <customBorder class="grid-item" title="实时用户增长">
            <RealtimeOrderList :fetch-page="fetchGrowthPage" :realtime-factory="realtimeGrowthFactory" :columns="growthColumns" />
        </customBorder>
        <customBorder class="grid-item" title="用户等级统计">
            <TrendChart :x-data="cLevelTrend.dateList" :series="cLevelTrend.series" />
        </customBorder>
        <customBorder class="grid-item" title="实时等级变化">
            <RealtimeOrderList :fetch-page="fetchLevelPage" :realtime-factory="realtimeLevelFactory" :columns="levelColumns" />
        </customBorder>
        <customBorder class="grid-item" title="实时用户权益放送">
            <RealtimeOrderList :fetch-page="fetchRewardsPage" :realtime-factory="realtimeRewardsFactory" :columns="rewardsColumns" />
        </customBorder>
        <customBorder class="grid-item" title="实时贡献值放送">
            <RealtimeOrderList :fetch-page="fetchCPPage" :realtime-factory="realtimePCFactory" :columns="cpColumns" />
        </customBorder>
        <customBorder class="grid-item" title="Top10等级排名">
            <CapsuleChart class="full-height" :config="topLevelRank.config" :data="topLevelRank.seriesData" />
        </customBorder>
        <customBorder class="grid-item" title="Top10贡献值排名">
            <CapsuleChart class="full-height" :config="topCPRank.config" :data="topCPRank.seriesData" />
        </customBorder>
        <customBorder class="grid-item" title=""></customBorder>
    </div>
</template>

<script lang="ts" setup>
import TrendChart from "@/components/custom/TrendChart.vue";
import RealtimeOrderList from "@/components/RealtimeOrderList.vue";
import CapsuleChart from "@/components/datav/capsule-chart";
import { useCustomerGrowthTrend, useCustomerLevelTrend } from "./hooks";
import { useCustomerCPForm, useCustomerGrowthForm, useCustomerLevelForm, useCustomerRewardsForm, useTopLevelRank, useTopCPRank } from "./hooks";
const cGrowthTrend = useCustomerGrowthTrend();
const cLevelTrend = useCustomerLevelTrend();
const { fetchOrderPage: fetchCPPage, realtimeFactory: realtimePCFactory, columns: cpColumns } = useCustomerCPForm(); // 实时贡献值放送
const { fetchOrderPage: fetchGrowthPage, realtimeFactory: realtimeGrowthFactory, columns: growthColumns } = useCustomerGrowthForm();
const { fetchOrderPage: fetchLevelPage, realtimeFactory: realtimeLevelFactory, columns: levelColumns } = useCustomerLevelForm();
const { fetchOrderPage: fetchRewardsPage, realtimeFactory: realtimeRewardsFactory, columns: rewardsColumns } = useCustomerRewardsForm();
const topLevelRank = useTopLevelRank();
const topCPRank = useTopCPRank();
</script>
<style lang="scss" scoped>
/* —— 变量区 —— */
$gap: 10px; // 你想要的边距
$cols: 3; // 3×3 九宫格

/* —— 九宫格容器 —— */
.grid-box {
    display: grid;
    grid-template-columns: repeat($cols, 1fr); // 三列，每列 1fr
    grid-template-rows: repeat($cols, 1fr);
    gap: $gap; // 行列间距都是 20px
    padding: $gap; // 容器四周再留 20px 边距
    box-sizing: border-box; // padding 算在宽高内
    height: calc(100% - 64px);
    position: relative;
    top: -10px;
}

/* —— 每个格子 —— */
.grid-item {
    background: transparent;
    border-radius: 6px;
    // aspect-ratio: 1 / 1; // 正方形
    display: flex;
    color: #fff;
    align-items: stretch; /* 确保子元素拉伸以填充整个单元格 */
}
.full-height {
    height: 100%;
}
</style>
